<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>在线学习系统后台管理</title>
	<link rel="stylesheet" href="../../resources/layui/css/layui.css">
	<link rel="stylesheet" href="../../resources/css/admin/Global.css" />
	<script type="text/javascript" src="../../resources/layui/layui.js"></script>
</head>
<style>
	/*屏幕width小于750px*/
	
	.p30 {
		padding-left: 30px;
	}
	
	@media screen and (min-width: 750px) {
		.layui-tab {
			margin-left: 200px;
		}
	}
	
	@media screen and (max-width: 750px) {
		.layui-layout-admin .layui-footer {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 44px;
			line-height: 44px;
			padding: 0 15px;
			background-color: #eee
		}
		.layui-layout-admin .layui-logo {
			display: none;
		}
	}
</style>

<body class="layui-layout-body ">
	<div class="layui-layout layui-layout-admin layui-anim layui-anim-fadein" style="height: 60px;">
		<div class="layui-header" style="background-color: #393D49;">
			<!--<div class="logo"><img src="<%=basePath%>static/image/logo-1.png"></div>-->
			<div class="layui-logo" style="margin-left: 80px;">在线学习系统后台管理</div>
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item">
					欢迎光临，${sessionScope.username}
				</li>
				<li class="layui-nav-item">
					<a href="">安全退出</a>
				</li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black layui-anim layui-anim-fadein">
			<div class="layui-side-scroll">
				<!-- 左侧垂直导航区域-->
				<ul class="layui-nav layui-nav-tree" lay-filter="test">
					<li class="layui-nav-item">
						<a href="javascript:;"><i class="layui-icon layui-icon-friends" style="margin-right: 5px;"></i><span>用户管理</span></a>
						<dl class="layui-nav-child">
							<dd>
								<a href="javascript:;" data-id="1" data-title="所有用户" data-url="./user/usermanage.jsp" class="site-demo-active" data-type="tabAdd"><i></i><span class="p30">所有用户</span></a>

							</dd>
						</dl>
					</li>
					
					
			<!-- 
					<li class="layui-nav-item">
						<a class="" href="javascript:;"><i class="layui-icon layui-icon-spread-left" style="margin-right: 5px;"></i><span style="margin-bottom: 3px;" id="artilcemanager">课程管理</span></a>
						<dl id="pl30" class="layui-nav-child p30">
				 
							<dd>
								<a href="javascript:;" data-id="2" data-title="课程管理" data-url="./coursemanage/coursemanage.jsp" class="site-demo-active" data-type="tabAdd"><span class="p30">课程管理</span></a>
							</dd>
				
						</dl>
					</li>
            -->	
					<li class="layui-nav-item">
						<a class="" href="javascript:;"><i class="layui-icon layui-icon-list" style="margin-right: 5px;"></i><span style="margin-bottom: 3px;" id="artilcemanager">论坛管理</span></a>
						<dl id="pl30" class="layui-nav-child p30">
							<dd>
								<a href="javascript:;" data-id="4" data-title="文章管理" data-url="./articlemanage/articlemanage.html" class="site-demo-active" data-type="tabAdd"><span class="p30">文章管理</span></a>
							</dd>
							<dd>
								<a href="javascript:;" data-id="5" data-title="问题管理" data-url="./articlemanage/question.html" class="site-demo-active" data-type="tabAdd"><span class="p30">问题管理</span></a>
							</dd>
						</dl>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:;"><i class="layui-icon layui-icon-cart-simple" style="margin-right: 5px;"></i>商品管理</a>
						<dl class="layui-nav-child p30">
							<dd>
								<a href="javascript:;" data-id="9" data-title="课程管理" data-url="../admin/shop/shopmanage.jsp" class="site-demo-active" data-type="tabAdd"><span class="p30">商品管理</span></a>
							</dd>
						</dl>
					</li>
					
			<!--  
					<li class="layui-nav-item">
						<a href="javascript:;"><i class="layui-icon layui-icon-friends" style="margin-right: 5px;"></i>系统管理</a>
						<dl class="layui-nav-child p30">
							<dd>
								<a href="javascript:;"><span class="p30">幻灯片管理</span></a>
							</dd>
						</dl>
					</li>
			-->
				</ul>
			</div>
		</div>

		<!--tab标签-->
		<div class="layui-tab  layui-anim layui-anim-up" lay-filter="demo" lay-allowclose="true">
			<ul class="layui-tab-title">
				<li class="layui-this" lay-id="1"><span><i class="layui-icon">&#xe638;</i>欢迎页</span></li>
			</ul>
			<div class="layui-tab-content" >
				<div class="layui-tab-item layui-show">
					<iframe  id="iframe" src="./user/usermanage.jsp" frameborder="0" style="width:100%;height:679px;"></iframe>
				</div>
			</div>
		</div>

		<div class="layui-footer" style="text-align:center;">
			<!-- 底部固定区域 -->
			© whyzaa XXXX管理平台
		</div>

		<div class="site-tree-mobile layui-hide">
			<i class="layui-icon">&#xe602;</i>
		</div>
		<div class="site-mobile-shade"></div>
	</div>

	<script>
		layui.use(['element', 'layer', 'jquery'], function() {
			var element = layui.element;
			// var layer = layui.layer;
			var $ = layui.$;
			// 配置tab实践在下面无法获取到菜单元素
			$('.site-demo-active').on('click', function() {
				var dataid = $(this);
				//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
				if($(".layui-tab-title li[lay-id]").length <= 0) {
					//如果比零小，则直接打开新的tab项
					active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
				} else {
					//否则判断该tab项是否以及存在
					var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
					$.each($(".layui-tab-title li[lay-id]"), function() {
						//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
						if($(this).attr("lay-id") == dataid.attr("data-id")) {
							isData = true;
						}
					})
					if(isData == false) {
						//标志为false 新增一个tab项
						active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
					}
				}
				//最后不管是否新增tab，最后都转到要打开的选项页面上
				active.tabChange(dataid.attr("data-id"));
			});

			var active = {
				//在这里给active绑定几项事件，后面可通过active调用这些事件
				tabAdd: function(url, id, name) {
					//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
					//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
					element.tabAdd('demo', {
						title: name,
						content: '<iframe data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>',
						id: id //规定好的id
					})
					FrameWH(); //计算ifram层的大小
				},
				tabChange: function(id) {
					//切换到指定Tab项
					element.tabChange('demo', id); //根据传入的id传入到指定的tab项
				},
				tabDelete: function(id) {
					element.tabDelete("demo", id); //删除
				}
			};

			function FrameWH() {
				var h = $(window).height();
				$("iframe").css("height", h + "px");
			}

		});
	</script>
	<script>
		layui.use(['element', 'layer', 'jquery'], function() {
			var element = layui.element;
			// var layer = layui.layer;
			var $ = layui.$;
			// 配置tab实践在下面无法获取到菜单元素
			$('.site-tree-mobile').on('click', function() {

				$("body").addClass("site-mobile");
				//$(".layui-side-scroll").addClass("layui-anim layui-anim-scale")
				$(".site-mobile-shade").click(function() {
					$("body").removeClass("site-mobile");
					//$(".layui-side-scroll").addClass("layui-anim layui-anim-scale")
				});
			});
			$("#artilcemanager").click(function() {
				$.ajax({
					url: "<%=basePath%>selectClassInfo.do"
				})
			})
		});
	</script>
</body>

</html>